<template>
  <div class="products-management">
    <div class="page-header">
      <div class="header-title">商品管理</div>
      <el-button type="primary" @click="showAddProductDialog">添加商品</el-button>
    </div>

    <el-table :data="products" style="width: 100%" border stripe>
      <el-table-column prop="id" label="ID" width="80" align="center" />
      <el-table-column label="商品图片" width="120" align="center">
        <template #default="scope">
          <el-image 
            :src="scope.row.image" 
            style="width: 50px; height: 50px; object-fit: cover;"
            :preview-src-list="[scope.row.image]"
          />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名称" min-width="150" />
      <el-table-column prop="price" label="价格" width="120" align="center">
        <template #default="scope">
          ¥{{ scope.row.price }}
        </template>
      </el-table-column>
      <el-table-column label="分类" width="120" align="center">
        <template #default="scope">
          {{ getCategoryName(scope.row.categoryId) }}
        </template>
      </el-table-column>
      <el-table-column prop="specialOffer" label="特价" width="100" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.specialOffer ? 'success' : 'info'" size="small">
            {{ scope.row.specialOffer ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template #default="scope">
          <el-button size="small" type="primary" @click="editProduct(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteProduct(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加/编辑商品对话框 -->
    <el-dialog
      :title="dialogType === 'add' ? '添加商品' : '编辑商品'"
      v-model="dialogVisible"
      width="600px"
    >
      <el-form :model="productForm" label-width="100px">
        <el-form-item label="商品名称" required>
          <el-input v-model="productForm.name" placeholder="请输入商品名称" />
        </el-form-item>
        <el-form-item label="价格" required>
          <el-input-number 
            v-model="productForm.price" 
            :precision="2" 
            :step="0.1" 
            :min="0"
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item label="分类" required>
          <el-cascader
            v-model="productForm.categoryId"
            :options="categoryOptions"
            :props="{ 
              label: 'name',
              value: 'id',
              children: 'subCategories'
            }"
            placeholder="请选择商品分类"
            style="width: 100%;"
          />
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :auto-upload="false"
          >
            <img v-if="productForm.image" :src="productForm.image" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input 
            type="textarea" 
            v-model="productForm.description" 
            :rows="4"
            placeholder="请输入商品描述"
          />
        </el-form-item>
        <el-form-item label="特价商品">
          <el-switch v-model="productForm.specialOffer" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveProduct">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useProductStore } from '@/stores/productStore';
import { ElMessage, ElMessageBox } from 'element-plus';

const productStore = useProductStore();
const products = ref([]);
const dialogVisible = ref(false);
const dialogType = ref('add');
const productForm = ref({
  name: '',
  price: 0,
  categoryId: null,
  description: '',
  specialOffer: false,
  image: ''
});

const categoryOptions = ref(productStore.categories);

onMounted(() => {
  products.value = productStore.products;
});

const showAddProductDialog = () => {
  dialogType.value = 'add';
  productForm.value = {
    name: '',
    price: 0,
    categoryId: null,
    description: '',
    specialOffer: false,
    image: ''
  };
  dialogVisible.value = true;
};

const editProduct = (product) => {
  dialogType.value = 'edit';
  productForm.value = { ...product };
  dialogVisible.value = true;
};

const deleteProduct = (product) => {
  ElMessageBox.confirm(
    `确定要删除商品 "${product.name}" 吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 这里添加删除商品的逻辑
    ElMessage.success('删除成功');
  });
};

const saveProduct = () => {
  // 这里添加保存商品的逻辑
  ElMessage.success(dialogType.value === 'add' ? '添加成功' : '更新成功');
  dialogVisible.value = false;
};

const getCategoryName = (categoryId) => {
  return productStore.getCategoryName(categoryId);
};
</script>

<style scoped>
.products-management {
  width: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2f3d;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-uploader:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: cover;
}

:deep(.el-table) {
  margin-top: 20px;
}

:deep(.el-dialog__body) {
  padding-top: 20px;
}
</style>